/* eslint-disable @typescript-eslint/no-explicit-any */
/**
 * 基于svg & base64实现水印效果,同时使用MutationObserver实现防修改
 *
 * @export
 * @param {*} {
 *   container = document.body,
 *   content = '诗和远方',
 *   needTime = false,
 *   timeFormat = 'yyyy-MM-dd hh:mm',
 *   width = '200px',
 *   height = '100px',
 *   fontSize = '12px',
 *   fontColor = 'black',
 *   opacity = '0.08',
 *   rotate = '-30',
 *   zIndex = 9999,
 *   style = ''
 * }
 */
import { currentFormatTime } from '../../formatTime'

 type options = {
  container: any,
  content: string,
  needTime: boolean,
  timeFormat: string,
  width: string,
  height: string,
  fontSize: string,
  fontColor: string,
  opacity: string,
  rotate: string,
  zIndex: number,
  style: string
 }

export function watermark (options: options):void {
  const { container, content, needTime, timeFormat, width, height, fontSize, fontColor, opacity, rotate, zIndex, style } = options
  const args = arguments[0] //eslint-disable-line
  const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" transform="rotate(${rotate})" style="-webkit-transform: rotate(${rotate});transform:rotate(${rotate});-ms-transform:rotate(${rotate})">
        <text x="50%" y="50%" dy="0px"
            text-anchor="middle"
            fill="${fontColor}"
            style="font-size: ${fontSize};-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;opacity: ${opacity};">
            ${content}
        </text>
        ${needTime
    ? `<text x="50%" y="50%" dy="25px"
            text-anchor="middle"
            fill="${fontColor}"
            style="font-size: ${fontSize};-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;opacity: ${opacity};">
            ${currentFormatTime(timeFormat)}
        </text>` : ''}
        </svg>`
  const base64Url = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`
  const __wm = document.querySelector('.__wm')  //eslint-disable-line

  const watermarkDiv = __wm || document.createElement('div')
  const styleStr = `position:fixed;top:0;left:0;width:100%;height:100%;z-index:${zIndex};pointer-events:none;background-repeat:repeat;background-image:url('${base64Url}');${style}`

  watermarkDiv.setAttribute('style', styleStr)
  watermarkDiv.classList.add('__wm')

  if (!__wm) {
    // container.style.position = 'relative'
    container.insertBefore(watermarkDiv, args.container.firstChild)
  }

  const MutationObserver = window.MutationObserver
  if (MutationObserver) {
    const mo = new MutationObserver(() => {
      const __wm = document.querySelector('.__wm')  //eslint-disable-line
      // 只在__wm元素变动才重新调用 watermark
      if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
        // 避免一直触发
        mo.disconnect()
        // mo = null
        watermark({ ...JSON.parse(JSON.stringify(args)), container })
      }
    })

    mo.observe(container, {
      attributes: true,
      subtree: true,
      childList: true
    })
  }
}
